[JavaScript] ES6：Destructuring 解構

Destructuring 解構

拆掉拆掉，通通拆掉，利用解構語法，我們可以把陣列或物件中的資料解開成為獨立的變數，不用像以前一樣一個個宣告變數，省下了好幾行程式碼啊！

解構陣列

基本語法：

const arr = [1, 2, 3, 4]
let first = arr[0];
let second = arr[1];
let third = arr[2];
let fourth = arr[3];
// 可以這樣寫
let [first, second, third, fourth] = arr
console.log(second, third) // 2 3

可以把宣告和指派分開敘述

let a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

可以設定預設值，當對應的值是 undefined 時，變數就會被宣告為預設值

let a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

利用解構來交換變數

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

利用解構來解析函式回傳的陣列

function f() {
  return [1, 2];
}

let a, b; 
[a, b] = f(); 
console.log(a); // 1
console.log(b); // 2

忽略某些回傳值

function f() {
  return [1, 2, 3];
}

const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

使用其餘參數，把陣列的其餘部分解構到一個變數

const [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

解構物件

基本語法：

let family = {
  ming: '小明',
  jay: '杰倫',
};

let ming = family.ming
let jay = family.jay

// 可以這樣寫
let { ming, jay } = family
// ming: 小明
// jay: 杰倫

一樣可以把宣告和指派分開敘述，但要注意要用()包住，且最後要加上 ;，不然左邊的區塊會被當成 block 而非物件

let a, b;
({a, b} = {a:1, b:2});

可以把物件中的屬性解構並擷取到名稱跟該屬性不一樣的變數

const o = {p: 42, q: true};
const {p: foo, q: bar} = o;

console.log(foo); // 42 
console.log(bar); // true

設定預設值

const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

從作為函式參數的物件中提取某屬性的值

const user = {
  id: 42,
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

function userId({id}) {
  return id;
}

function whois({displayName, fullName: {firstName: name}}) {
  return `${displayName} is ${name}`;
}

console.log(userId(user)); // 42
console.log(whois(user));  // "jdoe is John"

巢狀物件的解構

const obj = {
    name: 'nick',
    age: 30,
    family: {
        father: 'John'  
    },
}

let {name, age, family} = obj
console.log(name, age) // nick 30

let {father} = family
console.log(father) //John

循環取出的解構

const people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (const {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

在物件解構的時候也可以使用其餘參數

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log(a); // a
console.log(rest) //  {c: 30, d: 40}

混合使用解構陣列與物件

const props = [
  { id: 1, name: 'Fizz'},
  { id: 2, name: 'Buzz'},
  { id: 3, name: 'FizzBuzz'}
];

const [,, { name }] = props;

console.log(name); // "FizzBuzz"